import React, {useContext, useRef} from 'react';
import {Animated, FlatList, StyleSheet, Text, View} from 'react-native';
import i18n from "@/app/i18n/i18n";
import {useTranslation} from "react-i18next";
import {StockItem} from "@/app/tableview/StockItem";
import {useColorScheme} from "@/hooks/useColorScheme";
import {ThemedView} from "@/components/ThemedView";
import {useTheme} from "@/hooks/ThemeStyle";
import {Header} from "react-native/Libraries/NewAppScreen";
import {Button} from "react-native-paper";

// 数据
const data = [
    { id: '02517.HK', name: '铜圈', price: 3.71, change: -9.51, volume: -0.39, extra1: '123', extra2: '456', extra3: '789' },
    { id: '01451.HK', name: '万成集团股份', price: 0.89, change: 0.00, volume: 0.00, extra1: '123', extra2: '456', extra3: '789' },
    { id: '02320.HK', name: '合丰集团', price: 0.08, change: -11.11, volume: -0.01, extra1: '123', extra2: '456', extra3: '789' },
    { id: '02367.HK', name: '巨子生物', price: 52.30, change: 2.85, volume: 1.45, extra1: '123', extra2: '456', extra3: '789' },
    { id: '00914.HK', name: '海螺水泥', price: 21.75, change: 0.23, volume: 0.05, extra1: '123', extra2: '456', extra3: '789' },
];


export default function FixedLeftColumnTable() {
    const scrollX = useRef(new Animated.Value(0)).current; // 创建共享的 scrollX
    const { t } = useTranslation();
    // const { theme, toggleTheme } = useContext(ThemeContext);
    const { isDarkMode, toggleTheme } = useTheme(); // 使用主题上下文
    return (
        <ThemedView style={styles.container}>
            <Header/>
            <View style={styles.row}>
                <Button icon="camera" mode="contained" onPress={() =>{
                    i18n.changeLanguage('zh')
                }}>
                    简体中文
                </Button>
                <Button icon="camera" mode="contained" onPress={() =>{
                    i18n.changeLanguage('zh-Hant')
                }}>
                    繁体中文
                </Button>
                <Button icon="camera" mode="contained" onPress={() =>{
                    i18n.changeLanguage('en')
                }}>
                    英文
                </Button>
                <Text style={styles.text}>{t('wanke')}</Text>
            </View>
            <View style={styles.row}>
                <Button icon="camera" mode="contained" onPress={toggleTheme}>
                    白色
                </Button>
                <Button icon="camera" mode="contained" onPress={toggleTheme}>
                    黑色
                </Button>
                <Text style={styles.text}>{isDarkMode ? "黑色" : "白色"}</Text>

            </View>
            <FlatList
                data={data}
                renderItem={({ item }) => <StockItem item={item} scrollX={scrollX} />}
                keyExtractor={(item) => item.id}
            />
        </ThemedView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 10,
    },
    row: {
        height: 55,
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        alignItems: 'center',
    },
    fixedColumn: {
        width: 120, // 固定列宽度
        alignItems: 'flex-start', // 左对齐
    },
    scrollableColumn: {
        flexDirection: 'row',
        paddingLeft: 10,
    },
    text: {
        fontSize: 15,
        color: 'red',
        paddingHorizontal: 5,
    },
});
